<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我的社团</title>

    <script src="/ss/static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/ss/static/layui/layui.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/index.js" type="text/javascript"></script>
    <script src="/ss/static/layui/lay/modules/layer.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/sliders.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/html5.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/freezeheader.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/ss/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/ss/static/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="/ss/static/css/global.css"/>
</head>

<body>
<div th:replace="template.html::header"></div>

<div class="layui-container container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md12">
            <div class="article-main">
                <h2>
                    我的社团
                </h2>
                <div class="article-list" th:each="association : ${associations}">
                    <figure>
                        <a th:href="'association?aid=' + ${association.getAid()}">
                            <img th:src="${association.getFace()}">
                        </a>
                    </figure>
                    <ul>
                        <h3>
                            <a th:text="${association.getName()}"></a>
                        </h3>
                        <p th:text="${association.getDesc()}"></p>
                        <p class="autor">
                             <span>
                                <svg style="vertical-align: middle" width="15"
                                     height="15" viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg"><path
                                        d="M42.1691 29.2451L29.2631 42.1511C28.5879 42.8271 27.6716 43.2069 26.7161 43.2069C25.7606 43.2069 24.8444 42.8271 24.1691 42.1511L8 26V8H26L42.1691 24.1691C43.5649 25.5732 43.5649 27.841 42.1691 29.2451Z"
                                        fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round"/><path
                                        fill-rule="evenodd" clip-rule="evenodd"
                                        d="M18.5 21C19.8807 21 21 19.8807 21 18.5C21 17.1193 19.8807 16 18.5 16C17.1193 16 16 17.1193 16 18.5C16 19.8807 17.1193 21 18.5 21Z"
                                        fill="#333"/></svg>
                                <a th:text="${association.getTag()}"></a>
                            </span>
                            <span th:if="${user.getUid() != association.getUid()}">
                                <svg width="15" height="15" viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;"><path
                                        d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round" style="
"></path><path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path
                                        d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M4 10H44" stroke="#333"
                                                                             stroke-width="4"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333"
                                        stroke-width="4"
                                        stroke-linejoin="round"></path></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'quit(' + ${user.getUid()} + ', ' + ${association.getAid()} + ')'">退出社团</a>
                            </span>
                        </p>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="template.html::footer"></div>
</body>

<script type="text/javascript">
    function quit(uid, aid) {
        var json = {}
        json['uid'] = uid
        json['aid'] = aid
        $.ajax({
            url: 'api/member',
            type: 'delete',
            data: JSON.stringify(json),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) location.reload()
                else alert('退出社团失败')
            }
        })
    }
</script>
</html>
